<template>
  <div
    class="dialog"
    :style="{ left: winPos[0] - 20 + 'px', bottom: winPos[3] - 10 + 'px' }"
  >
    <img src="../assets/pin图标.png" alt="" />
  </div>
</template>

<script>
/* eslint-disable */
export default {
  props: {
    isshow: {
      type: String,
      default: {
        return: '',
      },
    },
    item: {
      type: Object,
      default() {
        return { name: 'pin对象1', lgtd: '', lttd: '' }
      },
    },
  },
  data() {
    return {
      winPos: [0, 0, 0, 0],
    }
  },

  watch: {
    item: {
      handler() {
        this.initBind()
      },
      immediate: true,
      deep: true,
    },
  },

  methods: {
    mouseover() {
      this.isShow = true
    },
    mouseLeave() {
      this.isShow = false
    },
    initBind() {
      if (this._czm) {
        this._czm.destroy()
      }
      this.$root._earth.interaction.picking.enabled = true
      this._czm = new XE.Obj.Pin(this.$root._earth)
      this._czm.name = this.item.name
      this._czm.position = [
        (this.item.lgtd * Math.PI) / 180,
        (this.item.lttd * Math.PI) / 180,
        100,
      ]
      this._czm.near = 300
      this._czm.show = false
      var pin1 = this._czm
      XE.MVVM.track(this, 'winPos', pin1, 'winPos')
    },
    fly() {
      this.detail = !this.detail
    },
  },
  beforeUnmount() {
    if (this._czm) {
      this._czm.destroy()
    }
  },
}
</script>

<style scoped>
.dialog {
  position: absolute;
  z-index: 1000;
  display: flex;
  width: 40px;
  color: #fff;
  border-radius: 5px;
}

.dialog > img {
  cursor: pointer;
}
</style>
